<template>
  <div class="user-group-container">
    <el-row :gutter="20" class="user-group">
      <el-col :xs="6" :sm="6" :lg="4" class="card-user-col">
        <div class="card-user card-user-item card-user-flex-center">
          <imagePreview
            :src="(avatar.indexOf('http://') === -1 && avatar.indexOf('https://') === -1) ? domain + avatar : avatar"
            width="120px" height="120px"/>
        </div>
      </el-col>
      <el-col :xs="18" :sm="18" :lg="20" class="card-user-col">
        <div class="card-user card-user-item card-user-item-padding card-user-flex-column">
          <div class="card-user-flex-between">
            <div class="card-user-text300">
              账户余额
              <span class="card-user-item-padding card-user-textbold">￥ {{ money }}</span>
            </div>
            <div class="card-user-button">
              <div class="button-item" @click="handleBtn(1)">充值</div>
              <div class="button-item" @click="handleBtn(2)">提现</div>
              <div class="button-item" @click="goFinancialStatement()">财务流水</div>
            </div>
          </div>
          <div class="fontSize16">
            <p>注：实时数据 当前汇率<span style="color: red"> US 100 : {{ exchangeRate }} RMB</span></p>
            <p>(汇率每小时更新一次，支付金额和利润统计可能存在误差，请以提现金额为准)</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="user-group">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="user-wrapper">
          <p>累计数据</p>
          <div class="user-wrapper-content">
            <div class="group-itembox">
              <div class="group-item">
                <div class="card-user">
                  <div class="card-user-description">
                    <div class="card-user-text">订单数</div>
                    <div class="card-user-num">{{ dialData.orderNumber }}</div>
                  </div>
                </div>
              </div>
              <div class="group-item">
                <div class="card-user">
                  <div class="card-user-description">
                    <div class="card-user-text">订单金额</div>
                    <div class="card-user-num">{{ dialData.payAmount }}</div>
                  </div>
                </div>
              </div>
              <div class="group-item">
                <div class="card-user">
                  <div class="card-user-description">
                    <div class="card-user-text">利润</div>
                    <div class="card-user-num">{{ dialData.profit }}</div>
                  </div>
                </div>
              </div>
              <div class="group-item">
                <div class="card-user">
                  <div class="card-user-description">
                    <div class="card-user-text">利润率</div>
                    <div class="card-user-num">{{ dialData.profitRate }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="充值" :visible.sync="dialogVisible" width="40%" center :close-on-click-modal="false"
               :close-on-press-escape="false" :show-close="false" destroy-on-close custom-class="dia-box">
      <div class="dialog-content" v-if="!isRechange">
        <div class="dialog-con-item">
          <div class="item-title">支付金额：</div>
          <div class="item-text item-checkbox">
            <el-radio v-model="payParams.money" label="1000">1000.00</el-radio>
            <el-radio v-model="payParams.money" label="2000">2000.00</el-radio>
            <el-radio v-model="payParams.money" label="5000">5000.00</el-radio>
            <el-radio v-model="payParams.money" label="10000">10000.00</el-radio>
          </div>
        </div>
        <div class="dialog-con-item">
          <div class="item-title">支付方式：</div>
          <div class="item-text item-checkbox">
            <el-radio v-model="payParams.payType" label="0">支付宝</el-radio>
            <!-- <el-radio v-model="payParams.payType" label="1">微信</el-radio> -->
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!isRechange">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="rechargeBtn" :disabled="payLoading" :loading="payLoading">充 值</el-button>
      </span>
      <span slot="footer" class="dialog-footer-isRechange" v-if="isRechange">
        <el-button type="primary" @click="isRechangeBtn">我已充值</el-button>
        <el-button @click="cancle">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import CountTo from 'vue-count-to'
import {queryNowUsdExchange} from "@/api/userIndex/index"
import {
  sellerStoreWalletOrder,
  findBySeller,
  ErpDialData
} from "@/api/index/index"

export default {
  components: {
    CountTo
  },
  computed: {
    ...mapGetters([
      'avatar',
      'domain'
    ]),
  },
  data() {
    return {
      // 是否显示弹出层
      dialogVisible: false,
      // 表单参数
      form: {},
      rules: {},
      radio: '1',
      exchangeRate: "",//最新汇率
      payParams: {
        type: undefined,
        payType: '0',
        money: '1000'
      },
      payLoading: false,
      isRechange: false,
      money: '0.00',
      dialData: {} // 实时数据
    }
  },
  created() {
    this.getNowUsdExchange();
    this.getFindBySeller();
    this.getErpDialData();
  },
  methods: {
    // 今日实时数据
    getErpDialData() {
      ErpDialData().then(res => {
        this.dialData = res.data;
      })
    },
    // 汇率
    getNowUsdExchange() {
      queryNowUsdExchange().then(res => {
        this.exchangeRate = res;
      })
    },
    // ERP钱包
    getFindBySeller() {
      findBySeller().then(res => {
        this.money = res.data.money;
      })
    },
    // 充值提现
    handleBtn(type) {
      // 充值
      if (type == 1) {
        this.dialogVisible = true;
        this.payParams.type = '1'
      }
    },
    // 跳转流水页面
    goFinancialStatement() {
      this.$router.push({path: "/cost-flow"})
    },
    // 重置表单
    reset() {
      this.payParams = {
        type: undefined,
        payType: '0',
        money: '1000'
      }
    },
    // 取消
    cancle() {
      this.reset();
      this.isRechange = false;
      this.dialogVisible = false;
    },
    // 充值
    rechargeBtn() {
      this.payLoading = true;
      sellerStoreWalletOrder(this.payParams).then(res => {
        this.payLoading = false;
        if (res.code === 200) {
          this.isRechange = true;
          const div = document.createElement('div'); // 创建div
          div.innerHTML = res.data; // 将返回的form 放入div
          document.body.appendChild(div);
          let len = document.forms.length - 1;
          document.forms[len].setAttribute('target', '_blank'); // 新开窗口跳转
          document.forms[len].submit();
        }
      })
    },
    // 我已充值
    isRechangeBtn() {
      this.dialogVisible = false;
      this.isRechange = false;
      this.reset();
      this.getFindBySeller();
    }
  }
}
</script>

<style lang="scss" scoped>
.user-group-container {
  .user-wrapper {
    background: #fff;
    padding: 20px 16px 0;
    margin-bottom: 32px;

    p {
      font-size: 16px;
      line-height: 18px;
      margin: 0 0 15px;
      color: #666;
    }

    .user-wrapper-content {
      padding: 10px 0 30px;
    }
  }

  .group-itembox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -16px;

    .group-item {
      width: calc(100% / 4);
      padding: 0 16px;
    }
  }

  .card-company-col {
    margin-bottom: 32px;
  }

  .card-company {
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    .card-company-description {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      padding: 26px;

      .card-company-text {
        line-height: 20px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 10px;
      }

      .card-company-num {
        font-size: 20px;
        line-height: 20px;
      }
    }
  }

  .card-company-item {
    height: 200px;
  }

  .card-company-item-padding {
    padding: 0 30px;
  }

  .dia-box {
    border-radius: 30px !important;
  }

  .dialog-content {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    padding: 20px;

    .dialog-con-item {
      border-bottom: 1px dashed #CCCCCC;
      padding: 30px 0;
      display: flex;
      align-items: flex-start;
      font-size: 16px;
      line-height: 30px;
      font-weight: 400;

      .item-title {
        text-align: left;
        color: #666666;
        width: 80px;
      }

      .item-text {
        flex: 1;
        color: #000000;
        padding: 0 12px;
      }

      &:last-child {
        border: none;
      }
    }
  }

  .user-group {
    .card-user-col {
      margin-bottom: 32px;
    }

    .card-user {
      height: 108px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      .card-user-description {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        padding: 26px;

        .card-user-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-user-num {
          font-size: 20px;
        }
      }
    }

    .card-user-item {
      height: 200px;
    }

    .card-user-item-padding {
      padding: 0 30px;
    }

    .card-user-textbold {
      font-size: 26px;
      font-weight: bold;
    }

    .card-user-text300 {
      font-size: 24px;
    }

    .card-user-button {
      flex: 1;
      padding-left: 80px;

      .button-item {
        display: inline-block;
        line-height: 40px;
        font-size: 20px;
        color: #36a3f7;
        padding: 0 15px;
        margin: 0 5px;
        cursor: pointer;
        border-radius: 6px;

        &:hover {
          background: #36a3f7;
          color: #fff;
        }
      }
    }

    .fontSize16 {
      font-size: 16px;
      line-height: 18px;
    }

    .card-user-flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-user-flex-between {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-user-flex-column {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}

@media (max-width: 550px) {
  .card-user-description {
    display: none;
  }

  .card-user-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
